<template>
	<view class="content">
		<addr-search></addr-search>
		 <!-- 条件 -->
		 <view class="query" >
		 	<view @tap="selectType">全类型</view>
			<view>全状态</view>
			<view>全时段</view>
			<view>全价格</view>
			<view>综合排序</view>
		 </view>
		 <view class="query-more" v-show="isHidden">
			 <view>全类型</view>
			 <view>IT互联网</view>
			 <view>创业</view>
			 <view>科技</view>
			 <view>全类型</view>
			 <view>IT互联网</view>
			 <view>创业</view>
			 <view>科技</view>
			 <view>全类型</view>
			 <view>IT互联网</view>
			 <view>创业</view>
			 <view>科技</view>
			 <view>全类型</view>
			 <view>IT互联网</view>
			 <view>创业</view>
			 <view>科技</view>
			 <view>全类型</view>
			 <view>IT互联网</view>
			 <view>创业</view>
			 <view>科技</view>
		 </view>
		 <activity2 v-for="item of activityList" :activity="item" :key="item.id"></activity2>
	</view>
</template>

<script>
	import AddrSearch from '../../components/addr_search.vue'
	import Activity2 from '../../components/activity2.vue'
	export default {
		data: function() {
			return {
				isHidden:false,
				activityList: [{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: 'http://cdn.huodongxing.com/Content/app/appom/223162756924552.jpg',
						money: 456
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: 'http://cdn.huodongxing.com/Content/app/appom/223162756924552.jpg',
						money: 123
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会暨智慧城市高峰论坛',
						addr: '福建厦门',
						date: '09/8 周一',
						img: 'http://cdn.huodongxing.com/Content/app/appom/223162756924552.jpg',
						money: 333
					},
					{
						id: '1',
						name: '2018 中国福建互联网大会',
						addr: '福建厦门',
						date: '09/8 周一',
						img: 'http://cdn.huodongxing.com/Content/app/appom/223162756924552.jpg',
						money: 10
					},
				]
			}
		},
		methods:{
			selectType() {
				this.isHidden = !this.isHidden
			}
		},
		components:{
			AddrSearch,
			Activity2
		},
	}
</script>

<style scoped>
	.query {
		display: flex;
		background: #fff;
		/* padding: 30px 0; */
		height: 90px;
		line-height: 90px;
		
	}
	.query>view{
		flex: 1;
		text-align: center;
		color: #777;
		font-size: 25px;
	}
	.query-more {
		position: absolute;
		box-sizing: border-box;
		width: 100%;
		max-height: 800px;
		overflow-x: hidden;
		overflow-y: auto;
		background: #fff;
		padding: 20px 0;
	}
	.query-more view{
		padding: 20px 25px;
		border-bottom: 1px solid #eee;
	}
</style>
